<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>数据大屏</title>
    <!-- 插件样式 -->
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link rel="stylesheet" href="__CDN__/daping/lib/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="__CDN__/daping/lib/xuehua/css/jquery.fallingsnow.css">
    <link rel="stylesheet" href="__CDN__/daping/lib/Odometerjs/Odometer.css">
    <!-- 网站样式 -->
    <link rel="stylesheet" href="__CDN__/daping/css/base.css">
    <link rel="stylesheet" href="__CDN__/daping/css/index.css">
    <!-- 插件 -->
    <script src="__CDN__/daping/lib/swiper/swiper-bundle.min.js"></script>
    <script src="__CDN__/daping/lib/jquery/jquery-3.7.0.min.js"></script>


<body>
    <div class="screen-container">
        <div class="header">
            <img src="__CDN__/daping/images/header.png" alt="">
            <div class="riqi">
                <div class="date">{:date('Y.m.d')}</div>
                <div class="time">{:date('H:i:s')}</div>
                <div class="xq">星期{$w}</div>
            </div>
            <div class="tianqi">
                多云 17~28℃
            </div>
            <!-- <script>
                const d = document.querySelector('.date')
                const riqi = new Date();
                const year = riqi.getFullYear() < 10 ? 0 : '' + riqi.getFullYear();
                const month = riqi.getMonth() < 9 ? 0 : '' + (riqi.getMonth() + 1);
                const day = riqi.getDate() < 10 ? 0 : '' + riqi.getDate();
                d.innerHTML = year + '.' + month + '.' + day;
                const t = document.querySelector('.time')
                const hour = riqi.getHours() < 10 ? 0 : '' + riqi.getHours();
                const minute = riqi.getMinutes() < 10 ? 0 : '' + riqi.getMinutes();
                const seconds = riqi.getSeconds() < 10 ? 0 : '' + riqi.getSeconds();
                t.innerHTML = hour + ':' + minute + ':' + seconds;
            </script> -->
        </div>
        <div class="main">
            <div class="left">
                <div class="card recharge-info">
                    <div class="card-header">
                        <img src="__CDN__/daping/images/card-header1.png" alt="">
                    </div>
                    <div class="card-body">
                        <div class="roll-vertical">
                            <div class="roll-header">
                                <span>昵称</span>
                                <span>时间</span>
                                <span>充值金额</span>
                            </div>
                            <div class="roll-body">
                                <div class="swiper mySwiperRecharge">
                                    <div class="swiper-wrapper">
                                        {volist name='data.recharge_list' id='v'}
                                        <div class="swiper-slide">
                                            <div class="roll-con">
                                                <span class="lines1">{$v.name}</span>
                                                <span>{$v.time}</span>
                                                <span><i>{$v.price}</i>元</span>
                                            </div>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                                <script>
                                    var swiperRecharge = new Swiper(".mySwiperRecharge", {
                                        direction: "vertical",
                                        slidesPerView: 6,
                                        spaceBetween: 0,
                                        allowTouchMove: false,
                                        speed: 5500,
                                        autoplay: {
                                            delay: 0,
                                            disableOnInteraction: false,
                                        },
                                        loop: true
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card actor">
                    <div class="card-header">
                        <img src="__CDN__/daping/images/card-header2.png" alt="">
                    </div>
                    <div class="card-body">
                        <div class="top-three">
                            <ul class="profile-photo">
                                {volist name='data.membersnumber_list' id='v'}
                                {if $key ==1 } 
                                <li>
                                    <div class="pic">
                                        <div class="box">
                                            <img src="{$v.performer_avatar}" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <div class="name">{$v.performer_text}</div>
                                        <div class="num">{$v.count}</div>
                                    </div>
                                    </li>
                                    {/if}
                                {/volist}
                                {volist name='data.membersnumber_list' id='v'}
                                {if $key == 0 } 
                                <li>
                                    <div class="pic">
                                        <div class="box">
                                            <img src="{$v.performer_avatar}" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <div class="name">{$v.performer_text}</div>
                                        <div class="num">{$v.count}</div>
                                    </div>
                                    </li>
                                    {/if}
                                {/volist}
                                {volist name='data.membersnumber_list' id='v'}
                                {if $key ==2 } 
                                <li>
                                    <div class="pic">
                                        <div class="box">
                                            <img src="{$v.performer_avatar}" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <div class="name">{$v.performer_text}</div>
                                        <div class="num">{$v.count}</div>
                                    </div>
                                    </li>
                                    {/if}
                                {/volist}
                            </ul>

                        </div>
                        <div class="roll-vertical">
                            <div class="roll-body">
                                <div class="swiper actorList">
                                    <div class="swiper-wrapper">
                                        {volist name='data.membersnumber_list' id='v'}
                                        {if $key > 2 }
                                        <div class="swiper-slide">
                                            <div class="roll-con">
                                                <div class="num">{$key+1}</div>
                                                <div class="profile-photo">
                                                    <div class="pic">
                                                        <img src="{$v.performer_avatar}" alt="">
                                                    </div>
                                                </div>
                                                <span style="width:4.8em;" class="lines1">{$v.performer_text}</span>
                                                <div class="bar">
                                                    <span style="width: {$v.bfb};"><i></i></span>
                                                    <em></em>
                                                </div>
                                                <div class="hot">{$v.count}</div>
                                            </div>
                                        </div>
                                        {/if}
                                        {/volist}


                                    </div>
                                </div>
                                <script>
                                    var actorList = new Swiper(".actorList", {
                                        direction: "vertical",
                                        slidesPerView: 3,
                                        spaceBetween: 10,
                                        allowTouchMove: false,
                                        speed: 5500,

                                    });
                                </script>
                                <script>
                                    const bar = document.querySelector('.bar');
                                    const h = bar.offsetWidth;
                                    $('.bar span i').css('width', h + 'px');
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="qqz">
                    <div class="center-tit">
                        <img src="__CDN__/daping/images/sjl.png" alt="">
                        <span>期权值</span>
                        <img src="__CDN__/daping/images/sjr.png" alt="">
                    </div>
                    <div class="qqz-nm">
                        <div class="Odometer"></div>
                        <div class="shanshuo1">
                            <div class="box"></div>
                        </div>
                        <div class="shanshuo2">
                            <div class="box"></div>
                        </div>
                    </div>
                    <div class="xz">
                        {volist name='data.user_list' id='v' key='k'}
                        <div class="xzhy{$k}">
                            <div class="hyzz">
                                {$v.type_text}新增用户数
                            </div>
                            <div class="box">
                                <div class="Odometer{$k+1} OdometerBg"></div>
                            </div>
                            <div class="ren">人</div>
                        </div>
                        {/volist}
                        <!-- <div class="xzhy2">
                            <div class="hyzz">
                                本月新增会员数
                            </div>
                            <div class="box">
                                <div class="Odometer3 OdometerBg"></div>
                            </div>
                            <div class="ren">人</div>
                        </div> -->
                    </div>
                </div>
                <script src="__CDN__/daping/lib/Odometerjs/Odometer.js"></script>
                <script>
                    (function () {
                        var num = Number("{$data.option_sum}"), num2 = Number("<?php echo $data['user_list']['0']['price'] ?>"), num3 = Number("<?php echo $data['user_list']['1']['price'] ?>")

                        var odo1 = new Odometer('.Odometer', {
                            num: num
                        });
                        var odo2 = new Odometer('.Odometer2', {
                            num: num2
                        });
                        var odo3 = new Odometer('.Odometer3', {
                            num: num3
                        });

                        // setInterval(() => {
                        //     // $.post("/addons/drama/wechat/recharge_user_list",function(res){
                        //     //     console.log(res)
                        //     //     odo1.update(res.option_sum);
                        //     //     odo2.update(res.user_list[0].price);
                        //     //     odo3.update(res.user_list[1].price);
                        //     // },'json');
                        //     num += 1, odo1.update(num);
                        //     num2 += 1, odo2.update(num2);
                        //     num3 += 1, odo3.update(num3);
                        // }, 5300)
                    })();
                </script>
                <div class="tuiju">
                    <div class="center-tit">
                        <img src="__CDN__/daping/images/sjl.png" alt="">
                        <span>推剧达人上月新增数据</span>
                        <img src="__CDN__/daping/images/sjr.png" alt="">
                    </div>
                    <div class="xuanzhuan">
                        <div class="t">
                            <img src="__CDN__/daping/images/tjdr.png" alt="">
                            <div class="jt">

                            </div>
                        </div>

                        <div class="b">
                            <div class="box">
                                <div class="c1 cc"></div>
                                <div class="c2 cc"></div>
                                <div class="c3 cc"></div>
                                <div class="c4 cc"></div>
                                {volist name='data.resellerlist_list' id='v' key='k'}
                                <div class="wz{$k} wz">
                                    <div class="box2">
                                        <span>{$v.count}</span>
                                        <p>{$v.name}</p>
                                    </div>
                                </div>
                                {/volist}
                                <!-- <div class="wz2 wz">
                                    <div class="box2">
                                        <span>6802</span>
                                        <p>推剧达人</p>
                                    </div>

                                </div>
                                <div class="wz3 wz">
                                    <div class="box2">
                                        <span>6803</span>
                                        <p>梦工厂</p>
                                    </div>

                                </div> -->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="card playlet">
                    <div class="card-header">
                        <img src="__CDN__/daping/images/card-header4.png" alt="">
                    </div>
                    <div class="card-body">
                        <div class="roll-vertical">
                            <div class="roll-header">
                                <span>排名</span>
                                <span>短剧名称</span>
                                <span>播放量</span>
                            </div>
                            <div class="roll-body">
                                <div class="swiper playletList">
                                    <div class="swiper-wrapper">
                                        {volist name='data.video_list' id='v' key="k"}
                                        <div class="swiper-slide">
                                            <div class="roll-con">
                                                {if $k < 4} <span class="top3"><img
                                                        src="__CDN__/daping/images/dj{$k}.png" alt=""></span>
                                                    {else/}
                                                    <span>{$k}</span>
                                                    {/if}
                                                    <img src="{$v.image}" alt="">
                                                    <span class="lines1">《{$v.title}》</span>
                                                    <span><i>{$v.dve_views}</i>次</span>
                                            </div>
                                        </div>
                                        {/volist}

                                    </div>
                                </div>
                                <script>
                                    var playlet = new Swiper(".playletList", {
                                        direction: "vertical",
                                        slidesPerView: 6,
                                        spaceBetween: 0,
                                        allowTouchMove: false,
                                        speed: 5500,
                                        // autoplay: {
                                        //     delay: 0,
                                        //     disableOnInteraction: false,
                                        // },
                                        // loop: true
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card pay">
                    <div class="card-header">
                        <img src="__CDN__/daping/images/card-header3.png" alt="">
                    </div>
                    <div class="card-body">
                        <ul>
                            {volist name='data.rechargelist_list' id='v' key='k'}
                            <li>
                                <div class="t">{$v.type_text}</div>
                                <div class="c"><span>{$v.price}</span>元</div>
                                <div class="b">
                                    <div class="box">
                                        <div id="snow{$k}"></div>
                                    </div>
                                </div>
                            </li>
                            {/volist}

                        </ul>
                        <script src="__CDN__/daping/lib/xuehua/js/jquery.fallingsnow.js"></script>
                        <script>
                            $("#snow1").fallingSnow();
                            $("#snow2").fallingSnow();
                            $("#snow3").fallingSnow();	
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <img src="__CDN__/daping/images/foot.png" alt="">
        </div>
    </div>


</body>

</html>